<template>
	<view class="container">
		<u-navbar :isBack="true" title="申请入驻" title-color="#fff" back-icon-color="#fff"
		:background="{background: '#FF9762'}" :borderBottom="false"></u-navbar>
		<!-- 地图部分 (占40%) -->
		<view class="map-container" style="background: #FF9762;">
			<view style="margin-top: 3vh;padding: 0 80px;">
				<!-- <u-steps :list="numList" :current="0" un-active-color="#fff" mode="number"
				icon="minus"></u-steps> -->
				<view style="display: flex;align-items: center;">
					<view style="padding-left: 18px;">
						<view style="width: 40rpx;height: 40rpx;background: #fff;border-radius: 50%;">
							<image src="@/static/icon/dg.png" mode="widthFix" style="width: 100%;"></image>
						</view>
					</view>
					<view style="height: 1px;background: #fff;flex: 1;"></view>
					<view style="padding-right: 18px;">
						<view style="width: 40rpx;height: 40rpx;background: #fff;border-radius: 50%;
						display: flex;align-items: center;justify-content: center;">
							<view style="background: #FF9762;border-radius: 50%;width: 20rpx;height: 20rpx;"></view>
						</view>
					</view>
				</view>
				<view style="display: flex;align-items: center;color: #fff;margin-top: 20rpx;">
					<view style="">商家认证</view>
					<view style="flex: 1;"></view>
					<view style="">店铺资料</view>
				</view>
			</view>
		</view>
		
		<!-- 其他内容部分 (占60%) -->
		<view class="content-container">
			<view style="font-weight: bold;">登录账号</view>
			<view class="location-info" style="">
				<input type="text" placeholder="请输入登录手机号" v-model="formData.username" maxlength="11"/>
			</view>
			<view style="font-weight: bold;margin-top: 20rpx;">登录密码</view>
			<view class="location-info" style="">
				<input type="text" placeholder="请输入登录密码" v-model="formData.password"/>
			</view>
			<view style="font-weight: bold;margin-top: 20rpx;">店铺名称</view>
			<view class="location-info" style="">
				<input type="text" placeholder="请输入店铺名称" v-model="formData.name"/>
			</view>
			<view style="font-weight: bold;margin-top: 20rpx;">店铺营业时间</view>
			<view class="location-info" style="">
				<input type="text" placeholder="请输入店铺营业时间" v-model="formData.business_hours"/>
			</view>
			<view style="font-weight: bold;margin-top: 20rpx;">店铺简介</view>
			<view class="location-info">
				<textarea placeholder="请控制字数300字内" style="width: 100%;" v-model="formData.brief"></textarea>
			</view>
			
			<view style="font-weight: bold;margin-top: 20rpx;">店铺Logo</view>
			<view class="" style="padding: 15px;width: 180rpx; background-color: #f5f5f5;
			border-radius: 5px; margin-bottom: 15px;margin-top: 20rpx;" @click="handleGoodsImage">
				<image :src="formData.logo" mode="widthFix" style="width: 100%;" v-if="formData.logo"></image>
				<image src="@/static/login/img_add.png" mode="widthFix" style="width: 100%;" v-else></image>
			</view>
			
			<view style="font-weight: bold;margin-top: 20rpx;">地址</view>
			<view class="location-info" style="" @click="regionShow = true">
				<input type="text" placeholder="请选择地址" v-model="formData.address"/>
			</view>
			<view style="font-weight: bold;margin-top: 20rpx;">店铺位置</view>
			<view class="location-info" style="display: flex;">
				<!-- <textarea placeholder="请输入店铺位置" style="width: 100%;"></textarea> -->
				<!-- <view style="margin-top: 16rpx;display: flex;"> -->
				<textarea class="" v-model="formData.position" placeholder-style="color:#CCCED1" 
				style="flex: 1; height: 100rpx; display:inline-block;" type="number" placeholder="请选择门店详细地址" ></textarea>
				<view @click="report_map">
					<u-icon name="map-fill" color="#2979ff" size="36"></u-icon>
				</view>
				<!-- </view> -->
			</view>
			<view style="font-weight: bold;margin-top: 20rpx;">店铺经营范围(多选)</view>
			<view style="margin-top: 20rpx;">
				<!-- <view>到家维修</view> -->
				<view class="list-container">
					<view class="list-item" 
					v-for="(item, index) in listData" :key="index"
					@click="toggleSelect(index)"
					:class="{ 'selected': selectedIndexes.includes(index) }">
						<!-- 这里放你的数据内容 -->
						<view class="item-content">
						  {{ item.name }}
						</view>
					</view>
				</view>
			</view>
			
			<view class="location-info" style="margin-top: 20rpx;display: flex;align-items: center;justify-content: space-between;"
			@click="navigateToTagSelect">
				<view style="font-weight: bold;">服务项目</view>
				<view style="display: flex;align-items: center;">
					<view class="location-text">{{serviceItemsSum}}项</view>
					<view>
						<u-icon name="arrow-right" color="#c8c9cc" size="28"></u-icon>
					</view>
				</view>
			</view>
			
			<view style="font-weight: bold;margin-top: 20rpx;">负责人姓名</view>
			<view class="location-info" style="">
				<input type="text" placeholder="请输入负责人姓名" v-model="formData.charge_name"/>
			</view>
			<view style="font-weight: bold;margin-top: 20rpx;">负责人电话</view>
			<view class="location-info" style="">
				<input type="text" placeholder="请输入负责人电话" v-model="formData.charge_mobile"/>
			</view>
		</view>
		
		<view style="background: #FF9762;height: 160rpx;padding: 34rpx;display: flex;align-items: center;">
			<view style="padding: 10px;color: #fff;display: flex;align-items: center;" @click="goUot">
				<image src="@/static/icon/syb.png" mode="widthFix" style="width: 40rpx;"></image>
				<view style="padding-left: 10rpx;">上一步</view>
			</view>
			<view style="padding: 10px;text-align: center;background-color: #fff;flex: 1;color: #FF9762;
			border-radius: 5px;" @click="goXia">提交</view>
		</view>
		
		<!-- 选择地区 :area-code='["13", "1303", "130304"]' -->
		<u-picker mode="region" v-model="regionShow" @confirm="regionConfirm"></u-picker>
	</view>
</template>

<script>
import configApi from 'utils/config.js';
import {request} from 'utils/request.js'
export default {
	data() {
		return {
			regionShow: false,
			
			value: 1,
			
			numList: [
				{ name: '商家认证' }, 
				{ name: '店铺资料' },
			],
			formData: {
				username: '',
				password: '',
				name: '',
				business_hours: '',
				brief: '',
				logo: '',
				address: '',
				position: '',
				operaterange: '',
				gigjobs: '',
				charge_name: '',
				charge_mobile: '',
				
				province: '',
				province_name: '',
				city: '',
				city_name: '',
				area: '',
				area_name: '',
				
				latitude: '',
				longitude: ''
			},
			serviceItemsSum: 0,
			
			// 示例数据
			listData: [],
			selectedIndexes: [] ,// 存储被选中的索引
			selectedTags: [],
		}
	},
	onLoad(e) {
	    // 从本地存储获取已选标签
		// this.loadSelectedTags();
		uni.$on('htmlRefresh', (e) => {
			let selectedTagsJson = e.selectedTagsJson;
			// console.log('子页面---->>>>>>', selectedTagsJson);
			if(selectedTagsJson) {
				this.selectedTags = JSON.parse(selectedTagsJson);
				// console.log('selectedTags: ', this.selectedTags)
				this.serviceItemsSum = this.selectedTags.length;
			}
		});
		
		this.getOperaterange();
		
		let _this = this;
		uni.getLocation({
			type: 'wgs84',
			success: function (res) {
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				_this.formData.latitude = res.latitude;
				_this.formData.longitude = res.longitude;
			}
		});
	},
	methods: {
		// 获取商家服务范围
		getOperaterange(){
			request.getWithToken({
				url: '/merchant/getOperaterange',
			}).then(res=>{
				console.log(res);
				this.listData = res.data;
			})
		},
		// 选择服务项目
		navigateToTagSelect() {
		    // 跳转到标签选择页面，并传递当前已选标签
		    uni.navigateTo({
				url: '/pages/merchant/serviceItems?selected=' + JSON.stringify(this.selectedTags)
			});
		},
		// 商品首图
		handleGoodsImage() {
		    let that = this;
		    uni.chooseImage({
		        count: 1,
		        sizeType: ['original', 'compressed'],
		        sourceType: ['album','camera'],
		        success: (chooseImageRes) => {
					request.uploadFileImg({
						url: '/common/upload',
						data: chooseImageRes.tempFilePaths[0],
					}).then(res => {
						console.log('图片路径', res);
						that.formData.logo = res;
					});
		        }
		    });
		},
		// 选择省市区
		regionConfirm(e){
			console.log('选择省市区:', e);
			this.formData.province = e.province.value;
			this.formData.province_name = e.province.label;
			
			this.formData.city = e.city.value;
			this.formData.city_name = e.city.label;
			
			this.formData.area = e.area.value;
			this.formData.area_name = e.area.label;
			
			this.formData.address = e.province.label + '-' + e.city.label + '-' + e.area.label;
		},
		// 详细地址定位
		report_map(){
			let _this = this
			uni.chooseLocation({
				success: (res)=> {
					console.log('选择位置：', res)
					_this.formData.latitude = res.latitude;
					_this.formData.longitude = res.longitude;
					_this.formData.position = res.address;
				}
			});
		},
		goUot(){
			uni.navigateBack();
		},
		goXia(){
			
			// 店铺经营范围
			let selectedIndexeslen = this.selectedIndexes.length;
			// console.log('selectedIndexes: ', this.selectedIndexes);
			let selListData = [];
			if(selectedIndexeslen > 0){
				for(let i = 0; i < selectedIndexeslen; i++){
					selListData[i] = this.listData[this.selectedIndexes[i]];
				}
			}
			let formDataThis = this.formData;
			formDataThis.operaterange = selListData;
			// console.log('selListData: ', selListData);
			formDataThis.gigjobs = this.selectedTags;
			// console.log('selectedTags: ', this.selectedTags);
			let applypFormData = uni.getStorageSync('applypFormData');
			formDataThis.applypFormData = applypFormData;
			// console.log('applypFormData: ', applypFormData);
			request.postWithToken({
				url: '/merchant/applyData',
				data: formDataThis
			}).then(res=>{
				console.log(res);
				if(res.code == 1){
					uni.showToast({
						title: '申请成功，等待审核...',
						duration: 2000,
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 2
						});
					}, 800);
				}else{
					// this.$refs.uToast.show({ title: res.msg });
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none'
					});
				}
			})
		},
		toggleSelect(index) {
			// 如果已经选中，则取消选中；否则添加到选中数组
			const i = this.selectedIndexes.indexOf(index)
			if (i > -1) {
				this.selectedIndexes.splice(i, 1)
			} else {
				this.selectedIndexes.push(index)
			}
			// 触发视图更新
			this.$forceUpdate()
		}
	}
}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100%;
	}

	.map-container {
		height: 11vh; /* 占40%高度 */
		width: 100%;
	}

	.map {
		width: 100%;
		height: 100%;
	}

	.content-container {
		flex: 1; /* 剩余60%高度 */
		padding: 15px;
		overflow-y: auto;
	}

	.location-info {
		padding: 15px;
		background-color: #f5f5f5;
		border-radius: 5px;
		margin-bottom: 15px;
		margin-top: 20rpx;
	}

	.location-text {
		font-size: 14px;
		color: #333;
	}

	.other-content {
		padding: 10px;
	}
</style>
<style scoped>
	.list-container {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: space-between;
	}
	 
	.list-item {
	  width: calc((100% - 40rpx) / 3);
	  margin-bottom: 20rpx;
	}
	 
	.item-content {
	  background-color: #f5f5f5;
	  border-radius: 10rpx;
	  padding: 20rpx;
	  text-align: center;
	  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	  transition: all 0.3s ease;
	}
	 
	/* 选中状态样式 */
	.list-item.selected .item-content {
	  background-color: #FF9762;
	  color: #ffffff;
	}
	 
	.item-image {
	  width: 100%;
	  height: 200rpx;
	  border-radius: 10rpx 10rpx 0 0;
	}
	 
	.item-title {
	  display: block;
	  padding: 10rpx;
	  font-size: 28rpx;
	  text-align: center;
	}
</style>